<template>
  <div class="fundDetails">
    <div class="fundDetails3">
      <span class="fundDetails3-1">可用余额</span>
      <el-button
        style="color: white; border: none; background-color: red"
        class="fundDetails3-3"
        @click="capitalRecharge()"
        >充值</el-button
      >
      <el-button
        style="color: red; border-color: red; background-color: white"
        class="fundDetails3-3"
        @click="capitalWithdraw()"
        >提现</el-button
      >
      <span class="fundDetails3-5">{{ from.user_balance }} 元</span>
    </div>
    <div class="fundDetails3-7">
      <div class="fundDetails3-9">
        <span class="fundDetails3-10">日期</span>
        <el-date-picker
          v-model="startDate"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          type="date"
          style="width: 14%; margin-left: 13px"
          @change="findRechargeableList1()"
        >
        </el-date-picker>
        -
        <el-date-picker
          v-model="endDate"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          type="date"
          style="width: 14%"
          @change="findRechargeableList1()"
        >
        </el-date-picker>
        <el-button
          style="
            color: black;
            background-color: white;
            border-radius: 5px;
            margin-left: 10px;
            border: none;
          "
          class="el-fundDetails"
          @click="findRechargeableList1(type1)"
          >全部</el-button
        >
        <el-button
          style="
            color: black;
            background-color: white;
            border-radius: 5px;
            margin-left: 10px;
            border: none;
          "
          class="el-fundDetails"
          @click="findRechargeableList1(type2)"
          >最近7天</el-button
        >
        <el-button
          style="
            color: black;
            background-color: white;
            border-radius: 5px;
            margin-left: 10px;
            border: none;
          "
          class="el-fundDetails"
          @click="findRechargeableList1(type3)"
          >最近1个月</el-button
        >
        <el-button
          style="
            color: black;
            background-color: white;
            border-radius: 5px;
            margin-left: 10px;
            border: none;
          "
          class="el-fundDetails"
          @click="findRechargeableList1(type4)"
          >最近3个月</el-button
        >
        <el-select
          v-model="type.detailsId"
          clearable
          style="width: 15%"
          @change="findRechargeableList1()"
        >
          <el-option
            v-for="item in type"
            :key="item.detailsId"
            :label="item.detailsTypeName"
            :value="item.detailsId"
          >
          </el-option>
        </el-select>
      </div>
      <el-table
        style="width: 100%; margin-top: 10px"
        :header-cell-style="{ background: 'silver', color: '#606266' }"
        :data="list.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
      >
        <el-table-column width="50"></el-table-column>
        <el-table-column
          label="时间"
          width="180px"
          prop="financialDetailsDate"
        ></el-table-column>
        <el-table-column
          label="类型"
          width="150px"
          prop="detailsTypeName"
        ></el-table-column>
        <el-table-column
          label="收入"
          width="136px"
          prop="financialDetailsIncome"
        >
          <template slot-scope="scope">
            {{ scope.row.financialDetailsIncome || "---" }}元
          </template>
        </el-table-column>
        <el-table-column label="支出" width="130px" prop="financialDetailsPaid">
          <template slot-scope="scope">
            {{ scope.row.financialDetailsPaid || "---" }}元
          </template>
        </el-table-column>
        <el-table-column
          label="账户余额"
          width="150px"
          prop="financialDetailsBalance"
        >
          <template slot-scope="scope">
            {{ scope.row.financialDetailsBalance || "---" }}元
          </template>
        </el-table-column>
        <el-table-column
          label="备注"
          width="150px"
          prop="financialDetailsName"
        ></el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[3, 6, 9, 12, 15]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        style="margin-top: 20px; margin-left: 150px"
        :total="list.length"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      from: {
        user_balance: "15000",
      },
      currentPage: 1, //初始页
      pagesize: 3, //每页条数
      dongJiePrice: "1000.00",
      startDate: "",
      endDate: "",
      type1: null,
      type2: 2,
      type3: 3,
      type4: 4,
      list: [],
      type: [],
    };
  },
  created() {
    this.findTypeList();
    this.findRechargeableList();
    this.inser();
  },
  methods: {
    //查询余额
    inser() {
      axios({
        url: "/api/user/findUserByPhone",
      }).then((res) => {
        console.log(res);
        this.from = res.data.data;
      });
    },
    //查询类型
    findTypeList() {
      axios({
        url: "/api/rechargeable/findTypeList",
      }).then((res) => {
        console.log(res);
        this.type = res.data;
      });
    },
    findRechargeableList1(type) {
      axios({
        url: "/api/rechargeable/getRechargeableList",
        params: {
          startDate: this.startDate,
          endDate: this.endDate,
          financialDetailsTypeId: this.type.detailsId,
          typeDate: type,
        },
      }).then((res) => {
        console.log(res);
        this.list = res.data.data;
      });
    },
    //查询充值表
    findRechargeableList() {
      axios({
        url: "/api/rechargeable/getRechargeableList",
      }).then((res) => {
        console.log(res);
        this.list = res.data.data;
      });
    },
    handleSizeChange(size) {
      console.log(size, "size");
      this.pagesize = size;
      console.log(this.pagesize); //每页下拉显示数据
    },
    handleCurrentChange(currentPage) {
      console.log(currentPage, "currentPage");
      this.currentPage = currentPage;
      console.log(this.currentPage); //点击第几页
    },
    capitalRecharge() {
      // alert(4513)
      this.$router.push({ path: "Recharge4" });
    },
    capitalWithdraw() {
      this.$router.push({ path: "Withdrawal5" });
    },
  },
};
</script>

<style>
.fundDetails3-10 {
  font-size: 18px;
  margin-left: 4%;
}
.fundDetails3-9 {
  width: 100%;
  height: 100px;
  padding-top: 26px;
  /* background-color: aqua; */
}
.fundDetails {
  height: 100%;
  width: 100%;
  background-color: #f6f6f6;
  float: left;
}
.fundDetails3-7 {
  width: 100%;
  height: 600px;
  background-color: white;
  float: left;
  margin-top: 20px;
}
.fundDetails3-5 {
  float: left;
  margin-left: 12.5%;
  margin-top: -2%;
  font-size: 20px;
  color: red;
}
.fundDetails3-6 {
  float: left;
  margin-left: 3%;
  margin-top: -2%;
  font-size: 20px;
}
.fundDetails3-3 {
  margin-left: 40%;
  float: left;
  margin-top: 3%;
  width: 13%;
  height: 40%;
  border-radius: 5px;
}
.fundDetails3-3:hover {
  background-color: red !important;
  color: #ffffff !important;
}
.fundDetails3-1 {
  margin-left: 14%;
  margin-top: 2%;
  float: left;
  font-size: 15px;
  color: rgb(232, 227, 227);
}
.fundDetails3-2 {
  margin-left: 9%;
  margin-top: 2%;
  float: left;
  font-size: 15px;
  color: rgb(232, 227, 227);
}
.fundDetails3 {
  border-radius: 8px;
  width: 100%;
  height: 100px;
  float: left;
  margin-bottom: 10px;
  background-color: white;
}
.el-fundDetails:hover {
  color: red !important;
}
</style>